<template>
  <div class="container">
    <el-row>
      <el-col :span="9">
        <el-input
          v-model="searchStr"
          size="small"
          placeholder="用户名/手机号"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          />
        </el-input>
      </el-col>
      <!-- <el-col style="text-align:right;" :span="14">
        <el-button
          style="margin-left:5px;"
          @click="addVipVisible = true"
          size="small"
          type="primary"
          >添加</el-button
        >
      </el-col> -->
    </el-row>
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%;margin-top:5px;"
      :height="tableHeight"
      border
      stripe
    >
      <el-table-column type="index" width="50" />
      <el-table-column
        prop="inviter"
        label="推荐人"
        width="150"
      />
      <el-table-column prop="nickname" label="用户名" width="150" />
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img
            style="height:50px;width:50px;object-fit:cover;border-radius:50%;"
            :src="scope.row.avatar"
            alt=""
          >
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ vipText(scope.row.level_id) }}
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{
            scope.row.sex === 0 ? "未选择" : scope.row.sex === 1 ? "男" : "女"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="绑定手机号" width="150" />
      <el-table-column label="总收益" width="200">
        <template slot-scope="scope"> ￥ {{ scope.row.earnings }} </template>
      </el-table-column>
      <el-table-column label="剩余额度/总额度" width="200">
        <template slot-scope="scope">
          ￥ {{ scope.row.restriction }}/{{ restriction }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="有效时间" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.level_stop_time">
            {{ scope.row.level_stop_time }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="身份证正面" width="150">
        <template slot-scope="scope">
          <img
            v-if="scope.row.front"
            style="height:80px; width:120px; object-fit:cover;"
            :src="
              scope.row.front + '?x-oss-process=image/resize,m_fill,h_120,w_80'
            "
            alt=""
            @click="imgPreview(scope.row.front)"
          >
        </template>
      </el-table-column>
      <el-table-column label="身份证反面" width="150">
        <template slot-scope="scope">
          <img
            v-if="scope.row.verso"
            style="height:80px; width:120px; object-fit:cover;"
            :src="
              scope.row.verso + '?x-oss-process=image/resize,m_fill,h_120,w_80'
            "
            alt=""
            @click="imgPreview(scope.row.verso)"
          >
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.created_at.date.split(".")[0] }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="
              currentUser = scope.row.id;
              detailVisible = true;
            "
          >详情</el-button>
          <el-button
            v-if="!scope.row.is_freeze"
            type="danger"
            size="small"
            @click="userBan(scope.row.id, scope.$index, 1)"
          >禁用</el-button>
          <el-button
            v-if="scope.row.is_freeze === 1"
            type="success"
            size="small"
            @click="userBan(scope.row.id, scope.$index, 0)"
          >解禁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-bottom-bar">
      <div />
      <el-pagination
        :current-page.sync="page"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        :background="true"
        @current-change="handleCurrentChange"
      />
    </div>
    <user-detail
      :id="currentUser"
      :visible="detailVisible"
      @close="detailVisible = false"
    />
    <add-vip
      :visible="addVipVisible"
      @close="
        addVipVisible = false;
        getUserList(page);
      "
    />
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, userBan, vipEdit } from '@/api/user-mng'
import userDetail from './components/user-detail'
import addVip from './components/add-vip'
export default {
  name: 'OrdinaryUser',
  components: {
    userDetail,
    addVip
  },
  data() {
    return {
      list: [],
      searchStr: '',
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      restriction: 0,
      detailVisible: false,
      currentUser: null,
      addVipVisible: false,
      dialogImageUrl: null,
      dialogVisible: false
    }
  },
  watch: {},
  created() {
    this.getUserList(1)
    this.changeSize()
  },
  methods: {
    vipText(id) {
      let text = ''
      switch (id) {
        case 1:
          text = '推广员'
          break
        case 2:
          text = '经理'
          break
        case 3:
          text = '一星经理↑'
          break
        case 4:
          text = '二星经理↑'
          break
      }
      return text
    },
    imgPreview(img) {
      this.dialogImageUrl = img
      this.dialogVisible = true
    },
    search() {
      this.getUserList(1)
    },
    userBan(id, index, ban) {
      userBan({ id, freeze: ban }).then(res => {
        if (res.code === 200) {
          this.list[index].is_freeze = ban
        }
      })
    },
    getUserList(page) {
      getUserList({
        page,
        level: 1,
        condition: this.searchStr ? this.searchStr : null
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data.map(item => {
            if (!item.qoe) {
              item.qoe = { name: '', img: '' }
            }
            return item
          })
          this.total = res.data.total
          this.page = res.data.current_page
          this.size = res.data.per_page
          this.restriction = res.data.restriction
        }
      })
    },
    handleCurrentChange(page) {
      this.getUserList(page, this.tabName)
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180
      window.onresize = () => {
        this.changeSize()
      }
    }
  }
}
</script>

<style scoped>
.upload-btn {
  display: inline-block;
  width: 120px;
  height: 50px;
  background: rgba(245, 245, 245, 1);
  text-align: center;
  line-height: 50px;
}
</style>
